<template>
  <div>
    <img src=".././assets/logo.png" />
    <h1>组件封装</h1>
    <!-- 使用element -->
    <!-- https://blog.csdn.net/qq_45632139/article/details/106134914 -->
    <!-- 组件传值的五种方式 https://blog.csdn.net/qq_44375977/article/details/104884834 -->
    <el-button type="primary" @click="zujianClick">召唤组件</el-button>
    <DialogPage
      :dialogVisible="dialogStatus"
      :title="zujianTitle"
      :dataArr="dataArr"
      @success="followupSuccess"
      @qvxiao="qvxiaoClick"
    ></DialogPage>
    <h2>表格展示</h2>
    <div class="tabel-box" style="background: pink">
      <div>
        <el-button type="primary">elment表格</el-button>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="日期" width="150">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="日期" width="150">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="150">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <Button type="primary" size="large">iview 表格</Button>
        <Table border :columns="columns12" :data="data6">
          <template slot-scope="{ row, index }" slot="action">
            <Button
              type="primary"
              size="small"
              style="margin-right: 5px"
              @click="show(index)"
              >View</Button
            >
            <Button type="error" size="small" @click="remove(index)"
              >Delete</Button
            >
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script>
import DialogPage from '../components/pop-up/dialog.vue'
import TabelData from './tabelData/index'
export default {
  name: 'HelloWorld',
  components: {
    DialogPage
  },
  data () {
    return {
      dialogStatus: false,
      zujianTitle: '',
      dataArr: ['111', '222', '333'],
      //   表格数据
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      columns12: Object.assign([], TabelData.columns),
      // (Object.assign讲解)   https://www.jianshu.com/p/d5f572dd3776
      data6: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park'
        }
      ]
    }
  },
  methods: {
    zujianClick () {
      this.dialogStatus = true
      this.zujianTitle = '我是被调用的组件'
      this.dataArr = ['我是父组件', '传过去', '的内容']
    },
    followupSuccess (data) {
      console.log(data, 'quedingClickquedingClick')
      this.dialogStatus = false
      this.$message(data)
    },
    qvxiaoClick (data) {
      this.dialogStatus = false
      this.$message(data)
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    }
  },
  mounted () {
    console.log('生命周期222')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabel-box {
  display: flex;
  justify-content: space-around;
}
</style>
